<template>
    <div class="chat-home">
      <Load v-show="loading"/>
      <div v-show="!loading" class="chat-box">
        <div class="left-box">
          <chat-nav/>
        </div>
        <div class="right-box">
          <router-view/>
        </div>
      </div>
    </div>
</template>

<script>
import Load from "@/common/Load";
import ChatNav from "@/components/chat/chat-nav";
export default {
  name: "ChatHome",
  components: {ChatNav,Load},
  data() {
    return {
      user: {},
      loading: false,
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
      this.user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")): {};
    this.loading =true;
    setTimeout(()=>{
      this.loading =false;
    },2000)
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style lang="less" scoped>
.chat-home{
  width: 100vw;
  height: 100vh;
  background-color: rgb(151,157,167);
  display: flex;
  justify-content: center;
  align-items: center;

  .chat-box{
    width: 95vw;
    height: 90vh;
    background-color: rgb(39,42,55);
    border-radius: 15px;
    display: flex;
    div{
      height: 100%;
    }
    .left-box{
      width: 150px;

    }

    .right-box{
      flex: 1;
    }

  }
}
</style>